<template>
  <el-container class="order-container">
    <el-header class="profile-header">
      <h1 @click="goToHome" class="home">XX网购物平台</h1>
      <div class="user-info">
        <el-button type="default" @click="goToProfile" icon="el-icon-user" class="profileButton">
          个人中心
        </el-button>
        <el-button type="default" @click="goToCart" icon="el-icon-shopping-cart-full" class="cartButton">
          购物车
        </el-button>
      </div>
    </el-header>
    <el-main class="order-main">
      <el-table :data="orderList" style="width: 100%">
        <el-table-column prop="orderId" label="订单编号"></el-table-column>
        <el-table-column prop="createdAt" label="下单时间"></el-table-column>
        <el-table-column prop="totalPrice" label="订单金额"></el-table-column>
        <el-table-column prop="orderStatus" label="订单状态"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="viewOrderDetails(scope.row)">查看详情</el-button>
            <el-button size="mini" type="danger" @click="cancelOrder(scope.row)">取消订单</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleOrderSizeChange"
          @current-change="handleOrderCurrentChange"
          :current-page="orderPage.currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="orderPage.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="orderPage.total"
          class="pagination"
      ></el-pagination>
    </el-main>
  </el-container>
</template>

<script>
import { orderList } from '@/api/orderApi'; // 假设 orderList 函数在 @/api/order.js 中定义

export default {
  name: 'ShopOrder',
  data() {
    return {
      orderList: [], // 初始化为空数组，等待从后端获取数据
      orderPage: {
        currentPage: 1,
        pageSize: 5,
        total: 0
      }
    };
  },
  methods: {
    goToProfile() {
      if (this.$route.path !== '/shopProfile') {
        this.$router.push('/shopProfile');
      }
    },
    goToCart() {
      if (this.$route.path !== '/shopCart') {
        this.$router.push('/shopCart');
      }
    },
    goToHome() {
      if (this.$route.path !== '/shop') {
        this.$router.push('/shop');
      }
    },
    viewOrderDetails(order) {
      this.$router.push({path: '/shopOrderDetails', query: {orderId: order.orderId}});
    },
    cancelOrder(order) {
      console.log('Canceling order:', order);
      // Implement cancel order logic here
    },
    handleOrderSizeChange(newSize) {
      this.orderPage.pageSize = newSize;
      this.fetchOrders(); // 重新获取数据
    },
    handleOrderCurrentChange(newPage) {
      this.orderPage.currentPage = newPage;
      this.fetchOrders(); // 重新获取数据
    },
    fetchOrders() {
      const params = {
        page: this.orderPage.currentPage,
        size: this.orderPage.pageSize
      };

      orderList(params)
          .then(response => {
            this.orderList = response.data.records; // 假设后端返回的数据结构是 { records: [], total: number }
            this.orderPage.total = response.data.total;
          })
          .catch(error => {
            console.error('Failed to fetch orders:', error);
            this.$message.error('加载订单失败，请稍后再试');
          });
    }
  },
  mounted() {
    this.fetchOrders(); // 在组件挂载时获取订单数据
  }
};
</script>

<style scoped>
.order-container {
  font-family: Arial, sans-serif;
}

.profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: powderblue; /* 淡蓝色背景 */
}

.user-info {
  display: flex;
  align-items: center;
}

.order-main {
  padding: 20px 200px;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}

.el-button {
  margin-right: 10px;
}

.profileButton, .cartButton {
  color: #409EFF; /* 更改文字颜色 */
}

.profileButton i, .cartButton i {
  color: #66baff; /* 图标颜色 */
}
.home{
  cursor: pointer; /* 添加手型光标 */
}
</style>